<!-- 提现订单查询 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="收益人手机号">
                            <a-input v-model="receivePhone" allow-clear placeholder="请输入收益人手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="下单人手机号">
                            <a-input v-model="sourcePhone" allow-clear placeholder="请输入下单人手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="下单订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入下单订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="16" :sm="24">
                        <a-form-item label="时间">
                            <a-date-picker v-model="gtDate" placeholder="开始时间" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allowClear></a-date-picker>
                            <span style="margin: 0 10px">-</span>
                            <a-date-picker v-model="ltDate" placeholder="结束时间" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allowClear></a-date-picker>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange"  size="small">
            <div slot="sourceUserId" slot-scope="sourceUserId,record">
                <span>{{sourceUserId}}/{{record.sourcePhone}}</span>
            </div>
            <div slot="sourceUserGrade" slot-scope="sourceUserGrade">
                <div v-for="(item,i) in gradeList" :key="item.id + 'i'">
                    <a-tag v-if="item.grade == sourceUserGrade" :color="colors[i%13]">{{item.gradeName}}</a-tag>
                </div>
            </div>
            <div slot="receiveUserId" slot-scope="receiveUserId,record">
                <span>{{receiveUserId}}/{{record.receivePhone}}</span>
            </div>
            <div slot="receiveUserGrade" slot-scope="receiveUserGrade">
                <div v-for="(item,i) in gradeList" :key="item.id + 'i'">
                    <a-tag v-if="item.grade == receiveUserGrade" :color="colors[i%13]">{{item.gradeName}}</a-tag>
                </div>
            </div>
            <div slot="withdrawType" slot-scope="withdrawType">
                <span v-if="withdrawType == 1">支付宝提现</span>
                <span v-if="withdrawType == 2">银行卡提现</span>
                <span v-if="withdrawType == 3">FIL提现</span>
            </div>
            <div slot="orderStatus" slot-scope="orderStatus">
                <div v-for="status in orderStatusList" :key="status.id">
                    <span :class="`status${orderStatus}`" v-if="status.id == orderStatus">{{status.name}}</span>
                </div>
            </div>
        </a-table>
    </div>
</template>

<script>
import { columns } from './table';
import { queryAwardRecord } from '@/api/order';
import { queryGradeProduct } from '@/api/product';
import { trickle } from 'nprogress';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            receivePhone: '', // 收益人手机号
            sourcePhone: '', // 下单人手机号
            orderCode: '', // 下单订单号
            gtDate: undefined,
            ltDate: undefined,
            gradeList: [],
            accountTypeList: [
                { id: 0 , name: '余额' },
                { id: 5 , name: '积分' },
            ],
            dataList: [],
            total: 0,
            page: 1,
            size: 10,
            item: {},
            operationStatus: '', // 审核状态
            remark: undefined,
            visible: false,
            columns,
            isload: false,
            hasAudit: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            confirmLoading: false,
            downloadVisible: false,
            pageSize: 1000,
            current: 1,
        };
    },
    async created(){
        try {
            await this.getBrandGrade();
            this.getData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'receivePhone':_this.receivePhone,
                'sourcePhone':_this.sourcePhone,
                'orderCode':_this.orderCode,
                'gtDate': _this.gtDate,
                'ltDate':_this.ltDate,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryAwardRecord(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data
                    _this.total = res.data.lengths
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            // this.getData()
        },
        // 获取品牌等级产品
        getBrandGrade(){
            let _this = this
            return new Promise((resolve,reject) =>{
                queryGradeProduct({'brandId': _this.brandId,'page': 0,'size': 99})
                .then(res=>{
                    if(res.success){
                        _this.gradeList = res.data.content;
                        resolve();
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
    }
}

</script>
<style scoped lang="less">
.status0{
    color: @primary-color;
}
.status1{
    color: #faad14
}
.status2{
    color: #f5222d
}
.status3{
    color: #f5222d
}
.status4{
    color: #52c41a
}
.status5{
    color: #faad14
}
.status6{
    color: #52c41a
}
</style>